{extend name="public/base" /}
{block name="style"}
<style>
    /* 资产总览 */
    .asset-overview {
        background-color: white;
        padding: 18px 15px;
        margin-bottom: 15px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .overview-title {
        font-size: 15px;
        color: #888;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .refresh-btn {
        color: #1AAD19;
        font-size: 14px;
        background: none;
        border: none;
        padding: 3px 5px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .refresh-btn i {
        margin-right: 4px;
        font-size: 13px;
    }

    .total-value {
        font-size: 28px;
        color: #E64340; /* 总资产金额红色 */
        font-weight: 600;
        margin-bottom: 8px;
    }

    .value-desc {
        font-size: 13px;
        color: #888;
        display: flex;
        align-items: center;
    }
    .value-desc i {
        font-size: 12px;
        margin-right: 4px;
    }

    /* 快捷操作区（仅保留充值/提现） */
    .asset-actions {
        display: flex;
        margin-top: 15px;
        gap: 12px; /* 增大间距，提升区分度 */
    }

    .action-btn {
        flex: 1; /* 两个按钮平分宽度 */
        padding: 13px 0; /* 增加高度，提升点击区域 */
        border-radius: 8px;
        border: none;
        font-size: 15px; /* 增大文字，提升可读性 */
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* 增加轻微阴影，提升立体感 */
    }
    .action-btn i {
        margin-right: 6px;
        font-size: 18px; /* 增大图标，与文字比例协调 */
    }

    /* 充值按钮优化（绿色系） */
    .recharge-btn {
        background-color: #1AAD19;
    }
    .recharge-btn:active {
        background-color: #168f15; /* 点击时加深颜色 */
        transform: scale(0.98); /* 轻微缩放，强化反馈 */
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* 提现按钮优化（蓝色系） */
    .withdraw-btn {
        background-color: #2B85E4;
    }
    .withdraw-btn:active {
        background-color: #2476d1; /* 点击时加深颜色 */
        transform: scale(0.98);
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* 币种列表（保持不变） */
    .currency-section {
        margin-bottom: 12px;
    }

    .section-title {
        font-size: 14px;
        color: #888;
        padding: 0 15px 8px;
    }

    .currency-list {
        background-color: white;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        margin-bottom: 15px;
    }

    .currency-item {
        display: flex;
        align-items: flex-start;
        padding: 16px 15px;
        border-bottom: 1px solid #f5f5f5;
        text-decoration: none;
        transition: background-color 0.2s;
    }

    .currency-item:last-child {
        border-bottom: none;
    }

    .currency-item:active {
        background-color: #f9f9f9;
    }
    .currency-item:hover {
        background-color: #fafafa;
    }

    .currency-icon {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        font-weight: 600;
        color: #333;
        font-size: 16px;
        margin-top: 2px;
    }
    .currency-icon.btc { background-color: #f0f7ff; }
    .currency-icon.eth { background-color: #fff0f7; }
    .currency-icon.usdt { background-color: #f0fff4; }
    .currency-icon.sol { background-color: #fff7f0; }
    .currency-icon.dot { background-color: #f7f0ff; }
    .currency-icon.ada { background-color: #e6f7ff; }
    .currency-info {
        flex: 1;
        min-width: 0;
    }

    .currency-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }

    .currency-name {
        font-size: 16px;
        color: #333;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .currency-price {
        font-size: 14px;
        color: #888;
        white-space: nowrap;
    }

    .amount-detail {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        font-size: 12px;
    }

    .total-amount-item {
        color: #E64340; /* 总金额红色 */
        font-weight: 500;
    }
    .available-amount-item, .frozen-amount-item {
        color: #E64340; /* 可用/冻结金额红色 */
    }

    .amount-label {
        display: inline-block;
        min-width: 40px;
        color: #888; /* 标签保持灰色，仅数值红色 */
    }

    .currency-total {
        text-align: right;
        white-space: nowrap;
    }

    .total-amount {
        font-size: 17px;
        color: #E64340; /* 右侧总金额红色 */
        font-weight: 600;
        margin-bottom: 3px;
    }

    .total-usdt {
        font-size: 12px;
        color: #E64340; /* 折合USDT金额红色 */
        text-align: right;
    }
</style>
{/block}

{block name="content"}
<div class="header">
    <a href="javascript:void(0);" class="back-btn">
        <i class="fa fa-angle-left" style="font-size: 24px;"></i>
    </a>
    <h1 class="header-title">我的钱包</h1>
</div>
<div class='weui-content'>
    <!-- 资产总览 -->
    <div class="asset-overview">
        <div class="overview-title">
            <span>资产总览</span>
            <button class="refresh-btn">
                <i class="fa fa-refresh"></i> 刷新
            </button>
        </div>
        <div class="total-value">{$sum} USDT</div>
        <div class="value-desc">
            <i class="fa fa-info-circle"></i>
            <span>总资产（折合USDT）= 所有币种市值总和（更新于 10:23）</span>
        </div>

        <!-- 快捷操作区（仅保留充值和提现） -->
        <div class="asset-actions">
            <a href="/pay.html" class="action-btn recharge-btn">
                <i class="fa fa-plus-circle"></i> 充值
            </a>
            <a href="/withdraw-apply.html" class="action-btn withdraw-btn">
                <i class="fa fa-minus-circle"></i> 提现
            </a>
        </div>
    </div>

    <!-- 币种 -->
    <div class="currency-section">
        <div class="section-title">资产列表</div>
        <div class="currency-list">
            <!-- BTC -->
           {foreach name="list" item="vo"}
            <a href="javascript:void(0);" class="currency-item">
                <div class="currency-icon btc">{$vo["coin"]["coin_name"]|strtoupper}</div>
                <div class="currency-info">
                    <div class="currency-header">
                        <div class="currency-name">{$vo["coin"]["coin_name"]|strtoupper}</div>
                    </div>
                    <div class="amount-detail">
                        <div class="total-amount-item">
                            <span class="amount-label">总金额：</span>{$vo["account_amount"]+$vo["frozen_amount"]} {$vo["coin"]["coin_name"]|strtoupper}
                        </div>
                        <div class="available-amount-item">
                            <span class="amount-label">可用：</span>{$vo["account_amount"]} {$vo["coin"]["coin_name"]|strtoupper}
                        </div>
                        <div class="frozen-amount-item">
                            <span class="amount-label">冻结：</span>{$vo["frozen_amount"]} {$vo["coin"]["coin_name"]|strtoupper}
                        </div>
                    </div>
                </div>
                <div class="currency-total">
                    <div class="total-amount">{$vo["account_amount"]+$vo["frozen_amount"]} {$vo["coin"]["coin_name"]|strtoupper}</div>
                    <div class="total-usdt">≈ {$vo["usdt"]} USDT</div>
                </div>
            </a>
           {/foreach}

        </div>
    </div>

</div>
<footer class="wy-footer">
    <a href="/" class="footer-nav">
        <i class="fa fa-home"></i>
        <span>首页</span>
    </a>
    <a href="/list.html" class="footer-nav ">
        <i class="fa fa-line-chart"></i>
        <span>行情</span>
    </a>
    <a href="/asset.html" class="footer-nav active">
        <i class="fa fa-cube"></i>
        <span>资产</span>
    </a>
    <a href="/member.html" class="footer-nav ">
        <i class="fa fa-user"></i>
        <span>我的</span>
    </a>
</footer>
{/block}
{block name="script"}


{/block}